<template>
    <div class="wrapper" id="my" >
        <header>
          特色课
          <van-icon name="search" class="search" @click="search"/>
        </header>
        <Select @sort="sort" @screen="screen" title1='分类' title2="排序" title3="筛选" :option1="this.option1" :option2="option2"></Select>

        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="list">
          <li v-for="(item,index) in list" ::key="index">
            <p class="title">{{item.title}}</p>
            <p class="time">{{new Date(item.start_play_date).toLocaleString()}} | 共{{item.sales_num}}课时</p>
            <div class="content">
              <img :src="item.teachers_list[0].teacher_avatar"/>
              <p class="contp">{{item.teachers_list[0].teacher_name}}</p>
            </div>
            <p class="bottom">
              <span class="span1">123</span>
              <span class="span2">123</span>
            </p>
          </li>
        </ul>
      </van-list>


        <tabs></tabs>
    </div>
</template>

<script>
import { courseBasis } from "../request/http.js";
import tabs from "../components/tabs";
import Select from "../components/select";
export default {
  components: {
    tabs,
    Select
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      limit: 5,
      option1:[
        { text: '综合', value: 0 },
         { text: '最新', value: 1 },
         { text: '最热', value: 2 },
         { text: '价格升序', value: 3 },
         { text: '价格降序', value: 4 },
      ],
      option2:[
        { text: '全部', value: 0 },
         { text: '图文', value: 10 },
         { text: '大班课', value: 2 },
         { text: '小班课', value: 3 },
         { text: '音频课', value: 8 },
         { text: '系统课', value: 9 },
      ]
    };
  },
  mounted() {
   
  },
  methods: {
    layerList() {
      console.log("11", this.page);
      courseBasis({ page: this.page, limit: this.limit }).then(res => {
        console.log(res);
        this.loading = false;
        if (res.data.data.list.length === 0) {
          this.finished = true;
          return;
        } else {
          let arr1 = this.list;
          const arr2 = res.data.data.list;
          arr1 = arr1.concat(arr2);
          this.list = arr1;
          this.page++;
        }
      });
    },
    onLoad() {
      console.log('屏幕滚动')
    this.layerList(this.page)
    },
    sort(val){
      console.log(val);
      courseBasis({order_by:val}).then(res=>{
        console.log(res);
        this.list=res.data.data.list
      })
    },
    screen(val){
      console.log(val);
      courseBasis({course_type:val}).then(res=>{
        console.log(res);
        this.list=res.data.data.list
      })
    },
    search(){
      this.$router.push('/search')
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  margin-bottom: 1.45rem;
  header {
    line-height: 1rem;
    width: 100%;
    height: 1rem;
    font-size: 0.5rem;
    text-align: center;
    box-sizing: border-box;
    padding: 0rem 0.2rem;
    background: #fff;
    border-bottom: 0.001rem solid #ccc;
    .search {
      float: right;
      line-height: 1rem;
    }
  }
  ul {
    list-style: none;
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem;
    li {
      width: 100%;
      height: 5rem;
      background: #fff;
      border-radius: 0.5rem;
      margin-top: 0.5rem;
      box-sizing: border-box;
      padding: 0.4rem;

      .title {
        font-size: 0.4rem;
      }
      .time {
        font-size: 0.3rem;
        margin-top: 0.2rem;
      }
      .content {
        margin-top: 0.3rem;
        line-height: 1.5rem;
        img {
          width: 1.5rem;
          height: 1.5rem;
          float: left;
          border-radius: 50%;
        }
        .contp {
          font-size: 0.4rem;
          float: left;
        }
      }
      .bottom {
        width: 100%;
        margin-top: 2.5rem;
        font-size: 0.37rem;
        span {
          display: inline-block;
        }
        .span2 {
          float: right;
          color: green;
        }
      }
    }
  }
}
</style>